<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <style>
        *{
           padding:0px;
           margin: 0px; 
           box-sizing: border-box; 
        }

/* 
  display:flex 设置元素的为弹性布局，
    flex表示为块元素，子元素也为块元素
    inline-flex:表示为行元素，子元素为行元素
 对于一个display：flex/inline-flex的子元素，称为flex item  

 flex item的特点
   1. flex item的边距不会折叠。float和clear属性对于flex item没有任何作用
   2. flex item不管之前是否为块元素还是行元素，只要是flex item都会被块化。（只能设置宽度和高度）
   3. 尽量避免对flex item设置为position:absolute
   4. flex item的min-width默认设置为0
    
flex item相关的属性
 flex-grow:增长因子，如果主轴中有多余空白的情况，flex item的增长因子,值必须是正整数或者是0，0表示不扩大
 flex-shrink：收缩系数
 flex-basis: 指定flex item的初始大小。
 通常通过flex属性对上述三个属性进行统一的设定
 flex:<flex-grow> <flex-shrink> <flex-basis> 
 flex: 0 1 auto;不允许放大，允许等比例缩小
 flex: 1 1 auto;允许放大，允许等比例缩小
 flex: 0 0 auto;
 */
        .container{
            /* 当前元素为弹性布局 */
            display: flex;
            width:602px;
            height:600px;
            border:1px solid black;
            margin:0px auto;
            /* 设置布局的方向 */
            /* flex-direction: row; */
            /* 设置容器是否为多行 */
            /* flex-wrap: wrap; */
            /* flex-flow:<flex-direction> <flex-wrap>  */
              flex-flow: row wrap; 
               /* 定义对于垂直方向的排列方式，通常对于单行项进行处理 */
              align-items: stretch ;
        }

        .container .item{
            width: 90px;
           
            /* text-align: center;
            line-height: 150px; */
            /* 设置文本内容水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .i1{
            height: 20%;  
          /* max-height: 30px; */
           flex: 1 0 auto;
        }

        .i2{
          height: 40%;
          flex-grow: 2;
        }
        .i3{
          height: 60%;
          flex-grow: 3;
        }
         
        .container .item:nth-child(odd){
           background-color: pink;
        }

        .container .item:nth-child(even){
           background-color: rgb(179, 171, 173);
        }
    </style>
</head>
<body>
    <div class="container"> 
        <div class="item i1">1</div>
        <div class="item i2">2</div>
        <div class="item i3">3</div> 
    </div>
</body>
</html>